<template>
  <div v-loading="state.loading">
    <div class="btns">
      <button class="btn" @click="startAnalyse">分析</button>
      <button class="btn" @click="clean">清除</button>
    </div>
  </div>
</template>

<script setup>
  import { onBeforeUnmount, onMounted, reactive } from 'vue';
  import useDraw, { DrawType } from '@/hooks/useDraw';
  import { ElNotification } from 'element-plus';
  import { vLoading } from 'element-plus';
  import * as Cesium from 'cesium';

  const state = reactive({
    tiped: false,
    loading: false,
  });
  const { drawStart, drawStop, drawClear } = useDraw(window.viewer, {
    type: DrawType.POLYLINE,
    drawingCallback: positions => {
      if (positions.length >= 2) {
      }
    },
  });

  const startAnalyse = () => {
    if (!state.tiped) {
      ElNotification({ message: '点击鼠标左键绘制视线，每两点分析一次，点击右键结束。', duration: 5000 });
      state.tiped = true;
    }
    drawStart();
  };

  const clean = () => {
    drawStop();
    drawClear();
  };

  onMounted(async () => {
    const tileset = await Cesium.Cesium3DTileset.fromUrl('http://127.0.0.1/arch/webapp/3dtile/Hangzhou/tileset.json');
    viewer.scene.primitives.add(tileset);
    viewer.zoomTo(tileset, new Cesium.HeadingPitchRange(0, Cesium.Math.toRadians(-90), 3000));
  });
  onBeforeUnmount(() => {
    clean();
  });
</script>
